<template>
  <el-dialog 
    :title="userId ? '修改课题' :  '新增课题'"
    :close-on-press-escape="false" 
    :close-on-click-modal="false"
    :append-to-body="true"
    :lock-scroll="true"
    :visible.sync="visible">
    <el-form ref="dataForm" :rules="dataRule" :model="dataForm" label-width="120px">
      <el-form-item label="课题名" prop="cgyName">
        <el-input v-model="dataForm.cgyName" show-word-limit maxlength="20" ></el-input>
      </el-form-item>
      <el-form-item label="描述"  prop="describes">
        <el-input type="textarea" v-model="dataForm.describes" show-word-limit maxlength="400" ></el-input>
      </el-form-item>
      
      <el-form-item label="课题类别" prop="cgyType" >
        <el-select filterable v-model="dataForm.cgyType" placeholder="类别">
          <el-option label="类别1" value="类别1"></el-option>
          <el-option label="类别2" value="类别2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课题来源" prop="cgySource" >
        <el-select v-model="dataForm.cgySource" placeholder="来源">
          <el-option label="学生" :value='1'></el-option>
          <el-option label="老师" :value='2' disabled></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="需求人数" prop="cgyName" >
        <el-input v-model="dataForm.score_db"></el-input>
      </el-form-item> -->
      
      <el-form-item label="院系"  prop="cgyDepart">
        <!-- <el-input v-model="dataForm.cgyDepart"></el-input> -->
        <el-select filterable v-model="dataForm.cgyDepart" placeholder="院系">
          <el-option v-for="item in getDictList('department')" :label="item.dictLabel"  :key="item.id"   :value="item.dictLabel"></el-option>
          <!-- <el-option label="计算机科学学院" value="计算机科学学院"></el-option>
          <el-option label="生命科学学院" value="生命科学学院"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="指导教师"  prop="tusername">
        <el-select filterable v-model="dataForm.tusername" placeholder="指导教师">
          <el-option v-for="item in teacherList" :lable="item" :value="item" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="教师名" prop="cgyName" >
        <el-input v-model="dataForm.teaName"></el-input>
      </el-form-item> -->
    </el-form> 
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span> 
  </el-dialog>
</template>
  
<script>
import servicesApi from '@/services/servicesApi'
import { getDictDataList } from '@/utils';
export default {
  data() {
    return {
      teacherList: [],
      dataForm: {
        cgyId: 0,
        userId: 0,
        cgyName: null,
        cgyDepart: null,
        cgyType: null,
        cgySource: null,
        tusername: null,
        teaName: null,
        describes: null,
        cgyStatus: 2,
        cgyLeadstatus: 2,
        cgyLeadadvice: null,
        cgyAdvise: null,
        gmtCreate: '2022-11-18 21:24:46',
        gmtModified: '2022-11-24 21:35:32',
        version: 7,
        deleted: 0
      },
      visible: false,
      userId: 0,
      cgyName: '',
      dataRule: {
        cgyName: [
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        describes: [
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        cgyType: [
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        cgySource: [
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        cgyDepart: [ 
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
        tusername: [
          { required: true, message: '必填项不能为空', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.getAllTea()
  },  
  methods: {
    getDictList(dictType) {
      let list = getDictDataList(dictType)
      // // console.log(list)
      return list
    },
    getAllTea() {
      servicesApi.getTeaList().then(res => {
        let code = res.data.code
        if (code == 200) {
          this.teacherList = res.data.data
          // this.$message({
          //   message: '操作成功',
          //   type: 'success',
          //   duration: 1500,
          // })
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 显示弹窗
    init(userId, cgyName) {
      this.visible = true
      // console.log(userId, cgyName)
      this.userId = userId || 0
      this.cgyName = cgyName || ''
      if (this.userId) { //传入userID->修改
        // console.log('修改课题')
        servicesApi.getTopic().then(res => {
          let code = res.data.code
          let data = res.data.data
          if (code === 200) {
            // console.log(data)
            // this.dataForm = { state: 1, ...data }
            this.dataForm = data
          }
        })
      } else { //新增
        // console.log('新增课题')
      }
      this.$nextTick(() => {
        if (this.$refs['dataForm'] != undefined) {
          this.$refs['dataForm'].resetFields()
        }
      })
    },
    // 提交表单
    dataFormSubmit() {
      // this.$message({
      //   message: '操作成功',
      //   type: 'success',
      //   duration: 1500,
      //   onClose: () => {
      //     this.visible = false
      //     this.$emit('refreshDataList')
      //   }
      // })
      if (this.userId) {//修改
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) { return false}
          servicesApi.applyTopic(this.dataForm).then(res => {
            let code = res.data.code
            if (code == 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(res.data.msg)
            }
          })
        })
      } else { //新增
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            servicesApi.applyTopic(this.dataForm).then(res => {
              if (res.data.code === 200) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList') //回显
                  }
                })
              } else {
                this.$message.error(res.data.msg)
              }
            })
          }
        })
      }

    }
  },
}
</script>
  